import { CodeObject } from '@/type/global';
import { Alert, Button, Card, Table, Tabs } from 'antd';
import { useEffect, useState } from 'react';
import CodeEditor from '../CodeEditor';
import RenderCode from '../RenderCode';
import RenderSQLCode from '../RenderSQLCode';
import * as XLSX from 'xlsx';
import moment from 'moment';
interface IProps {
    code: CodeObject;
}

const CodeView: React.FC<IProps> = (props) => {

    const [jsonData, setJsonData] = useState<any>(() => props.code.json ? JSON.parse(props.code.json) : {});

    const [column, setColumn] = useState<any[]>([]);

    useEffect(() => {
        if (props.code.json) {
            const data = JSON.parse(props.code.json)

            const obj = data[0];
            let arr: any[] = [];
            Object.keys(obj).forEach((item, index) => {
                arr[index] = {
                    dataIndex: item,
                    title: item
                };
            });

            setColumn(arr);
            setJsonData(data);
        }
    }, [props.code.json]);

    function handleExport() {
        let header = Object.keys(jsonData[0]).map(item => item);
        let data: any = [
            header
        ]
        jsonData.forEach((item: any) => {
            let arr: any = [];
            Object.keys(item).forEach((key, index) => {
                arr[index] = item[key] || '';
            });
            data.push(arr);
        })
        const ws = XLSX.utils.aoa_to_sheet(data);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
        XLSX.writeFile(wb, `${moment(new Date()).format('YYYY-MM-DD HH:mm:ss')}.xlsx`);
    }

    function MockDataTable() {
        return (
            <div>

                {column.length ? <div>
                    <Button onClick={handleExport} style={{ marginBottom: '12px' }}>导出数据</Button>
                    <Table dataSource={jsonData} columns={column} />
                </div> : null}
            </div>
        )
    }

    const items = [
        { label: 'typescript 类型', key: 'typescript', children: <RenderCode language='typescript' title="typescript 类型" code={props.code.ts} /> },
        { label: 'Java 代码', key: 'java', children: <RenderCode language='java' title="Java 类型" code={props.code.java} /> },
        { label: 'SQL 代码', key: 'sql', children: <RenderSQLCode code={props.code.sql} /> },
        { label: 'JSON 代码', key: 'json', children: <RenderCode language='json' title="json 数据" code={props.code.json}></RenderCode> },
    ];

    const ProComponentItems = [
        { label: 'ProTable 配置项', key: 'ProTable', children: <RenderCode language='javascript' title="ProTable 配置项" code={props.code.proTable}></RenderCode> },
        { label: 'ProForm 配置项', key: 'ProForm', children: <RenderCode language='javascript' title="ProForm 配置项" code={props.code.proForm}></RenderCode> }
    ]

    return <div>
        <Card title="生成结果">
            <Tabs items={items} />
        </Card>

        <Card style={{ marginTop: '36px' }} title="ProComponent 生成结果">
            <Alert
                message="当您使用 Vue3 做项目时，且使用到了TDesign和 procomponent-tdesign-vue 组件时，可以复制以下代码段可直接使用"
                type="warning"
            />
            <Tabs items={ProComponentItems} />
        </Card>
    </div>
}

export default CodeView;
